<style scoped>
.mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 9;
}
.invoice{
    position: fixed;
    /* position: relative; */
    top: 23%;
    left: 50%;
    transform: translateX(-50%);
    /* border: 1px solid black; */
    width: 550px;
    height: 575px;
    z-index: 99;
    background-color: white;
    overflow: auto;
}
.invoice>div:first-child{
    display: flex;
    padding: 10px 15px;
    justify-content: space-between;
    background: #f4f4f4;
}
/* .i_content div:first-child,.i_content>div:nth-child(2){
    margin-bottom: 20px;
} */
.invoice>div:first-child>p{
    font-weight: 700;
}
.invoice>div:nth-child(2){
    padding: 0 15px;
}
.i_content{
    padding-left: 50px;
    font-size: 15px;
}
.i_content>div>div,.i_content>div{
    display: flex;
    
}
/* .color{
    color: red;
    margin: 0 4px 0 0;
} */
.row p:first-child{
    color: red;
    margin: 0 4px 0 0;
}
.row{
    margin: 5px 0 30px 0;
}
.row>div:first-child{
    width: 120px;
    justify-content: flex-end;
}
.row1{
    margin:5px 0 0 0;
}
.row2{
    margin:15px 0 20px 0;
}
.row3{
    margin: 20px 0 0 0;
    padding-left: 35px;
}
.row>div>p{
    margin: 3px 0 0 0;
}
._input{
    width: 300px;
}
.tips{
    background: #f4f4f4;
    padding: 15px;
    font-size: 14px;
}
.tips>p:first-child{
    color: #757575;
    font-weight: 600;
    margin-bottom: 10px;
}
.com{
    font-size: 15px;
    /* padding: 15px 15px 15px 40px; */
    /* padding: 15px; */
}
.people{
    font-size: 15px;
    /* padding: 15px; */
}
.com div:not(:nth-child(5)){
    display: flex;
}
.people div:not(:nth-child(6)){
    display: flex;
}

._input1{
    display: flex;
    margin: 20px 0 0 0;
    padding-left: 43px;
  }
.p3{
    width: 120px;
    display: flex;
    justify-content: flex-end;
  }
.p3 p:first-child{
    color: red;
    margin-right: 3px;
}

</style>

<style>
.Invoice .invoice .i_content .el-input__inner{
    height: 30px;
}
.Invoice .invoice .com .el-input__inner{
    height: 30px;
}
.Invoice .invoice .people .el-input__inner{
    height: 30px;
}
.Invoice .invoice .el-step.is-simple .el-step__icon{
    display: none;
}
.Invoice .invoice .el-step__title.is-process{
    font-size: 15px;
    font-weight: normal;
}
.Invoice .sty .el-input__inner{
    height: 30px;
    width: 95px;
    padding: 0 5px;
    margin-right: 8px;
  }
</style>

<template>
    <div class="Invoice">
        <div class="mask"></div>
        <div class="invoice">
            <div>
                <p>发票信息</p>
                <i @click="closeIncoice" class="el-icon-close"></i>
            </div>
            <div>
                <el-tabs v-model="billingType" @tab-click="handleClick">
                    <el-tab-pane label="电子普通发票" name="first">
                        <div class="i_content">
                            <div class="row">
                                <div>
                                <p class="color">*</p><p>邮箱：</p>
                                </div>
                                <el-input @blur="Email" v-model="email" class="_input" placeholder="请输入邮箱"></el-input>
                            </div>

                            <el-radio @change="people" v-model="invoiceType" label="0">个人</el-radio>

                            <div class="row">
                                <div>
                                <p class="color">*</p><p>发票抬头：</p>
                                </div>
                                <el-input :disabled="Dis1" v-model="headName" class="_input" placeholder="请输入发票抬头"></el-input>
                            </div>

                            <el-radio @change="com" v-model="invoiceType" label="1">公司</el-radio>
                            <div class="row row1">
                                <div>
                                <p class="color">*</p><p>公司名称：</p>
                                </div>
                                <el-input :disabled="Dis" v-model="companyName" class="_input" placeholder="请输入公司名称"></el-input>
                            </div>
                            <div class="row row2" style="margin-bottom:20px">
                                <div>
                                <p class="color">*</p><p>纳税人识别号：</p>
                                </div>
                                <el-input :disabled="Dis" v-model="taxpayerNumber" class="_input" placeholder="请输入纳税人识别号"></el-input>
                            </div>

                        </div>
                        <div class="tips">
                            <p>温馨提示</p>
                            <p>若发票开具后，您要同时修改发票的抬头和税号，请联系我司。</p>
                            <p>为了您的方便，请正确填写发票信息，谢谢！</p>
                        </div>
                        <div style="margin-top:32px;text-align:end">
                        <el-button @click="ElIn" type="primary">确定</el-button>
                        </div>
                    </el-tab-pane>


                    <!-- 专用发票 -->
                    <el-tab-pane label="专用发票" name="second">
                        <el-steps :active="active" simple>
                            <el-step title="①输入公司信息"></el-step>
                            <el-step title="②输入收票人信息"></el-step>
                        </el-steps>

                        <div class="com" :style="{display:showCom}">
                            <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>公司名称：</p>
                                </div>
                                <el-input v-model="companyName" class="_input" placeholder="请输入公司名称"></el-input>
                            </div>

                            <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>纳税人识别号：</p>
                                </div>
                                <el-input v-model="taxpayerNumber" class="_input" placeholder="请输入纳税人识别号"></el-input>
                            </div>

                            <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>注册地址：</p>
                                </div>
                                <el-input v-model="companyAddress" class="_input" placeholder="请输入注册地址"></el-input>
                            </div>

                            <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>注册电话：</p>
                                </div>
                                <el-input @keyup.native="UpNumber" v-model="phone" class="_input" placeholder="请输入注册电话"></el-input>
                            </div>
                            <div class="tips"  style="margin-top:70px">
                                <p>温馨提示</p>
                                <p>顺丰寄送，一般会在15个工作日内送达给您（如遇节假日稍有延迟），请注意查收；增值税专用发票收到后请妥善保存</p>
                            </div>
                            <div style="float:right;margin-top:15px">
                            <el-button @click="next" type="primary">下一步</el-button>
                            </div>
                        </div>

                        <div class="people" :style="{display:showPeople}">

                            <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>姓名：</p>
                                </div>
                                <el-input v-model="name" class="_input" placeholder="请输入姓名"></el-input>
                            </div>

                            <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>手机号码：</p>
                                </div>
                                <el-input @keyup.native="UpNumber" v-model="draweePhone" class="_input" placeholder="请输入手机号码"></el-input>
                            </div>

                            <!-- <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>所在地区：</p>
                                </div>
                                <el-input class="_input" placeholder="请输入注册地址"></el-input>
                            </div> -->
                            <div class="_input1">
                                <div class="p3" style="margin-left:-8px">
                                <p>*</p> <p>地区：</p>
                                </div>
                                <div class="sty">
                                    <el-row>
                                <el-select v-model="province" placeholder="选择省" @change="selectProvimce">
                                <el-option
                                    v-for="item of provincearr"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                                </el-select>

                                <el-select v-model="city" placeholder="选择市" @change="selectcity">
                                <el-option
                                    v-for="item of cityarr"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                                </el-select>

                                <el-select v-model="area" placeholder="选择区" @change="selectarea">
                                <el-option
                                    v-for="item of regionarr"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                                </el-select>
                                </el-row>
                                </div>
                            </div>

                            <div class="row row3">
                                <div>
                                    <p>*</p>
                                    <p>详细地址：</p>
                                </div>
                                <el-input v-model="detailedAddress" class="_input" placeholder="请输入详细地址"></el-input>
                            </div>

                            <div class="row row3">
                                <div>
                                    <p></p>
                                    <p>邮政编号：</p>
                                </div>
                                <el-input v-model="postCode" class="_input" placeholder="请输入邮政编号"></el-input>
                            </div>

                            <div class="tips" style="margin-top:20px">
                                <p>温馨提示</p>
                                <p>顺丰寄送，一般会在15个工作日内送达给您（如遇节假日稍有延迟），请注意查收；增值税专用发票收到后请妥善保存</p>
                            </div>

                            <div style="float:right;margin-top:15px">
                                <el-button @click="back">上一步</el-button>
                                <el-button @click="SpIn" type="primary">确定</el-button>
                            </div>
                        </div>

                        
                    </el-tab-pane>

                   
                    
                </el-tabs>
            </div>
        </div>

    </div>
</template>

<script>
// import {postPayment} from '../../../network/payment'
import {provincea} from '../../../config/address'
export default {
    created(){
        this.provincearr = provincea
    },
    data(){
        return{

            // arr: [1, 3, 4],
            provincearr: [],
            cityarr: [],
            regionarr: [],
            // provinceValue: '',
            // cityValue: '',
            // RegionValue: '',

            options:[],
            invoiceType:'',
            email:'',
            headName:'',
            companyName:'',
            taxpayerNumber:'',
            companyAddress:'',
            phone:'',
            name:'',
            draweePhone:'',
            province:'',
            city:'',
            area:'',
            detailedAddress:'',
            postCode:'',

            Dis: false,
            Dis1:false,
            billingType:'first',
            // invoiceType:'',
            active:1,
            showCom:'block',
            showPeople:'none',
        }
    },
    methods:{
        UpNumber(e) {//输入数字
            e.target.value = e.target.value.replace(/[^\d]/g,"");
        },

        selectProvimce (id) {
            this.cityarr = [];
            this.regionarr = [];
            this.city = '';
            this.area = '';
            for (let item of this.provincearr) {
                if (id == item.id) {
                    this.province = item.name
                    // console.log(this.province)
                    console.log(item)
                    this.cityarr = item.children
                }
            }
        },
        selectcity (id) {
            this.regionarr = [];
            this.area = '';
            for (let item of this.cityarr) {
                if (id == item.id) {
                    this.city = item.name
                    this.regionarr = item.children
                }
            }
        },
        selectarea(id){
            for(let item of this.regionarr){
                if(id == item.id){
                    this.area = item.name
                }
            }
        },

        Email(){
            let emailReg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/
            if(!emailReg.test(this.email)){
              this.$message.warning({message:'请填写正确邮箱',offset:400})
            }
        },
        com(){
            this.Dis1 = true
            this.Dis = false
        },
        //发票选择公司还是个人
        people(){
            this.Dis = true
            this.Dis1 = false
        },
        // 专用发票确定
        SpIn(){
            if(this.name =='' || this.draweePhone == '' || this.detailedAddress == '' || this.province == '' || this.city == '' || this.area == '' ){
                this.$message.warning({message:'请填写完整信息',offset:400})
                    return
            }
            if(!(/^1[3456789]\d{9}$/.test(this.draweePhone))){
                this.$message.warning({message:'请填写正确手机号码',offset:400})
                    return
            }
            // for(const i of this.provincearr)
            let obj = {
                companyName:this.companyName,
                taxpayerNumber:this.taxpayerNumber,//纳税人识别号
                companyAddress:this.companyAddress,
                phone:this.phone,

                name:this.name,
                draweePhone:this.draweePhone,
                province:this.province,
                city:this.city,
                area:this.area,
                detailedAddress:this.detailedAddress,
                postCode:this.postCode,
                billingType:this.billingType == 'first' ? 0 : 1
            }
            console.log(obj)
            this.$emit('SpIn',(obj))
        },

        // 电子发票确定
        ElIn(){
            if(this.email == ''){
                this.$message.warning({message:'请填写邮箱',offset:400})
                return
            }else if(this.invoiceType == ''){
                this.$message.warning({message:'请勾选个人或公司并填写',offset:400})
                return
            }
            let obj = {
                //电子发票
                email:this.email,
                headName:this.headName,
                companyName:this.companyName,
                taxpayerNumber:this.taxpayerNumber,
                invoiceType:Number(this.invoiceType),
                billingType:this.billingType == 'first' ? 0 : 1
            }
            console.log(obj)
            this.$emit('ElIn',(obj))
            
            },

        next() {
            if(this.companyName == '' || this.taxpayerNumber == '' || this.companyAddress == '' || this.phone == ''){
                this.$message.warning({message:'请填写完整信息',offset:400})
                return
            }
            var regPhone =/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|^0\d{2,3}-?\d{7,8}$/;
            if(!regPhone.test(this.phone)){
                this.$message.warning({message:'请填写正确手机或座机号码',offset:400})
                return
            }
            if (this.active++ > 2) return;
            // this.billingType1 = 'second'
            if(this.active == 2){
                this.showPeople = 'block'
                this.showCom = 'none'
            }
        },
        back(){
            if(this.active-- == 1) return;
            if(this.active == 1){
                this.showPeople = 'none'
                this.showCom = 'block'
            }
        },
        closeIncoice(){
            this.$emit('closeIncoice')
        },
        handleClick(tab, event) {
            // console.log(tab, event);
      }
        }
}
</script>
